<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
  <nav class="navbar navbar-default">
    <div class="container-fluid">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">microservices4vaadin - Landing page</a>
      </div>


      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" ng-controller="LoginController">
        <ul class="nav navbar-nav">
          <!-- <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li> -->
        </ul>
        <form name="signin" class="navbar-form navbar-right" ng-submit="login()" role="form">
          <div class="alert alert-danger" ng-show="error">
            There was a problem logging in. Please try again.
          </div>
          <div class="form-group">
              <input id="email" type="text" class="form-control" name="username" value="" placeholder="Username" ng-model="credentials.username">
          </div>

          <div class="form-group">
              <input id="password" type="password" class="form-control" name="password" value="" placeholder="Password" ng-model="credentials.password">
          </div>

          <button type="submit" class="btn btn-primary">Login</button>
        </form>
      </div>
    </div>
  </nav>

  <div class="container">
    <div class="row centered-form">
      <div class="col-sm-6">
        <p class="lead">Register now for <span class="text-success">FREE</span></p>
        <ul class="list-unstyled" style="line-height: 2">
            <li><span class="fa fa-check fa-3x text-success"></span> See all your orders</li>
            <li><span class="fa fa-check fa-3x text-success"></span> Shipping is always free</li>
            <li><span class="fa fa-check fa-3x text-success"></span> Save your favorites</li>
            <li><span class="fa fa-check fa-3x text-success"></span> Fast checkout</li>
            <li><span class="fa fa-check fa-3x text-success"></span> Get a gift <small>(only new customers)</small></li>
            <li><span class="fa fa-check fa-3x text-success"></span>Holiday discounts up to 30% off</li>
        </ul>
      </div>
      <div class="col-sm-6">
        <div ng-show="registrationSuccess" class="panel panel-default">

          <div class="panel-heading">
            <h3 class="panel-title">Validate your account</h3>
          </div>
          <div class="panel-body" ng-controller="ActivationController">
            <p>This would normally be done via e-mail, but for demo purposes click the button</p>
            <div class="alert alert-success" ng-show="activationSuccess">
                <strong>Validation Successfull</strong> Please authenticate.
            </div>

            <div class="alert alert-danger" ng-show="activationError">
                <strong>There was an error validating your account.  Your code may have expired</strong> Please use the registration form to register your username.
            </div>
            <a class="btn btn-default" href="" ng-click="onActivatePressed()">Activate</a>
          </div>
        </div>
        <div class="panel panel-default">

          <div class="panel-heading">
            <h3 class="panel-title">Please sign up <small>It's free!</small></h3>
          </div>
          <div class="panel-body" ng-controller="RegisterController">
            <form id="register" name="registerForm" role="form" ng-submit="register()">
              <div class="alert alert-danger" data-ng-show="register.$invalid" ng-show="error">
                  <strong>Registration failed!</strong> Please check your input and try again.
              </div>

              <div class="alert alert-danger" ng-show="errorUserExists">
                  <strong>Login name already registered!</strong> Please choose another one.
              </div>

              <div class="alert alert-danger" ng-show="errorEmailExists">
                  <strong>E-mail is already in use!</strong> Please choose another one.
              </div>

              <div class="alert alert-danger" ng-show="errorDifferentPasswordConfirm">
                  The password and its confirmation do not match!
              </div>
              <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6">
                  <div class="form-group">
                    <input type="text" name="first_name" id="first_name" required class="form-control input-sm" placeholder="First Name" ng-model="registrationData.firstName">
                  </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6">
                  <div class="form-group">
                    <input type="text" name="last_name" id="last_name" required class="form-control input-sm" placeholder="Last Name" ng-model="registrationData.lastName">
                  </div>
                </div>
              </div>

              <div class="form-group">
                <input type="email" name="email" id="email" required class="form-control input-sm" placeholder="Email Address" ng-model="registrationData.email">
              </div>

              <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6">
                  <div class="form-group">
                    <input type="password" name="password" required id="password" class="form-control input-sm" placeholder="Password" ng-model="registrationData.password">
                  </div>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6">
                  <div class="form-group">
                    <input type="password" name="password_confirmation" id="password_confirmation" required class="form-control input-sm" placeholder="Confirm Password" ng-model="confirmPassword">
                  </div>
                </div>
              </div>

              <input type="submit" value="Register" class="btn btn-primary">

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
